<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品展示</title>
  <style>
    a{text-decoration: none; color: #000;}
    img{display: block; width: 100%; display: block;}
    *{margin: 0; padding: 0;}
    /* 导航 */
    #head{width: 90%; margin: 0 auto; height: 100px;}
    #rightbanner{float: left;}
    #rightbanner img{width: 60px; height: 60px; float: left; margin: 10px 0;}
    #rightbanner p{line-height: 80px; float: left; margin-left: 20px;}
    nav{float: right; width: 60%; line-height: 80px;}
    nav a{width: 16%; text-align: center; color: #606060; display: inline-block;}
    nav a:hover,nav a:nth-child(4){color: #76BD51; }
    /* banner */
    #banner{height: 650px;}
    .banner-left{width: 30%; float: left;}
    .banner-left ul{margin-left: 15%; margin-top: 100px; list-style: none; width: 70px;}
    .banner-left ul li{font-size: 1.5rem; line-height: 4rem; color: #9EA09F;}
    .banner-left ul li:hover{font-size: 3rem; color: #000; border-right: 5px #000 solid;}
    .banner-right{width: 70%; float: right; position: relative;}
    .banner-right-img{width: 100%; height: 550px;}
    .banner-right p{position: absolute; top: 30px; left: 30px; font-size: 4rem; font-weight: bold; color: #6FB749;}
    /* banner第二个 */
    #banners{width: 100%; height: 400px;}
    .banners-left{width: 50%; float: left;}
    .banners-left-img{width: 100%; height: 395px;}
    .banners-right{width: 30%; float: left; margin-left: -10%; margin-top: 100px;}
    .banners-right h1{color: #111111; font-size: 2rem; line-height: 5rem; display: block;}
    .banners-right p{color: #353535; text-indent: 3rem;}
    .banners-right a{background-color: #6AB743; width: 30%; margin: 30px 0; display: block; text-align: center; line-height: 2rem; color: #fff; border-radius: 25px;}
    /* middle */
    #middle{width: 100%; margin: 0 auto;}
    .middle{width: 70%; margin: 0 auto;}
    /* middle-one第一个模块 */
    .middle-one{position: relative; text-align: center;}
    .middle-one-img{width: 100%; height: 500px; margin: 50px 0;}
    .middle-one-word{position: absolute; top: 100px; left: 40%; color: #FEFFFE; font-size: 2rem;}
    .middle-one-word p:first-child{font-size: 1.2rem; margin-bottom: 10px;}
    .middle-one-word a{color: #FEFFFE; font-size: 1rem; background-color: #6AB743; width: 60%; text-align: center; margin: 30px 20%; line-height: 2rem; border-radius: 25px; display: block;}
    /* middle-two第二个模块 */
    .middle-two{height: 100px;}
    .middle-two-left{float: left; font-size: 2rem; color: #121212; font-weight: bold;}
    .middle-two-right{float: right;}
    .middle-two-left p:first-child{color: #6AB743; font-size: 1.3rem; margin: 10px 0;}
    .middle-two-right{color: #313131; font-weight: bold; line-height: 60px;}
    /* middle-three第三个模块 */
    #middle-three{margin: 50px 0; height: 450px;}
    .middle-three-threes{width: 20%; margin-right: 5%; float: left;}
    .middle-three-threes:last-child{margin-right: 0;}
    .middle-three-img{width: 100%; height: 300px;}
    .middle-threes{width: 80%; margin: 0 auto; text-align: center;}
    .middle-threes p{color: #131313;font-size: 1.1rem; margin: 10px 0;}
    .middle-three-twos{width: 60%; margin-left: 20%; padding: 5px 0 0 0; color: #131313; height: 25px;}
    .middle-three-twos span:first-child{float: left; color: #9F9F9F; text-decoration:line-through;}
    .middle-three-twos span:nth-child(2){float: right;}
    .middle-threes a{display: block; border-radius: 25px; margin: 10px 0; background-color: #6AB743; margin-left: 10%; color: #fff; line-height: 2rem; width: 80%;}
    /* middle-three第三个模块(包含第四个) */
    .middle-four{width: 45%; margin-right: 5%; float: left; height: 450px; position: relative;}
    .middle-four-img{height: 300px; width: 100%;}
    .middle-fours{width: 80%; margin: 0 auto; text-align: center;}
    .middle-fours p{color: #131313;font-size: 1.1rem; margin: 10px 0;}
    .middle-four-twos{width: 30%; margin: 0 auto; height: 25px; padding: 5px 0 0 0;}
    .middle-four-twos span:first-child{float: left; color: #9F9F9F; text-decoration:line-through;}
    .middle-four-twos span:last-child{float: right;}
    .middle-fours a{display: block; border-radius: 25px; margin: 10px 0; background-color: #6AB743; margin-left: 20%; color: #fff; line-height: 2rem; width: 60%;}
    .dazhe{position: absolute; top: 50px; right: -5%; width: 25%; text-align: center; line-height: 2.5rem; color: #fff; background-color: #FF390C;}
    /* 尾部 */
    #footer{background-color: #2B2B2B; color: #fff;}
    .footer{text-align: center; line-height: 4rem; height: 4rem;}
    #foot{background-color: #373737; height: 300px; width: 100%;}
    .foot{width: 70%; margin: 0 auto;}
    .footleft{width: 15%; padding: 30px 0; float: left;}
    .footleft a{display: block; color: #fff; line-height: 2rem;}
    .footleft a:first-child{font-size: 1.2rem; line-height: 3rem;}
    .footleft img{width: 130px; padding: 30px 0;}
    .footleft p{color: #fff;}
    .footright{padding: 60px 0;}
    .footright p{color: #fff;}
    .footright p:nth-child(2){font-size: 2rem; line-height: 5rem;}
  </style>
</head>
<body>
  <!-- 导航  -->
  <div id="head">
    <div id="rightbanner">
      <img src="./img/jia.png" alt="">
      <p>绿色小屋</p>
    </div>
    <nav>
      <a href="./index.html">首页</a>
      <a href="./Two.html">精品示范</a>
      <a href="./Three.html">装修风格</a>
      <a href="./Four.html">产品展示</a>
      <a href="./Five.html">家装定制</a>
      <a href="./Six.html">关于我们</a>            
    </nav>
  </div>
  <!-- banner -->
  <div id="banner">
    <div class="banner-left">
      <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
      </ul>
    </div>
    <div class="banner-right">
      <img class="banner-right-img" src="./img/1629439279334.jpg" alt="">
      <p>产品展示</p>
    </div>
  </div>
  <!-- banner第二个 -->
  <div id="banners">
    <div class="banners">
      <div class="banners-left">
        <img class="banners-left-img" src="./img/1629367677352.jpg" alt="">
      </div>
    </div>
    <div class="banners-right">
      <h1>NATURE系列桌面灯</h1>
      <p>由设计师设计的一款智能感应灯,用于桌面照明等等。由设计师设计的一款智能感应灯,用于桌面照明，由设计师设计的一款智能;恋应灯，用于桌面照明。</p>
      <a href="#">了解更多</a>
    </div>
  </div>
  <!-- middle -->
  <div id="middle">
    <div class="middle">
      <!-- middle-one第一个模块 -->
      <div class="middle-one">
        <img class="middle-one-img" src="./img/1629372706711.jpg" alt="">
        <div class="middle-one-word">
          <p>真皮系列沙发</p>
          <p>疯狂618活动折上折</p>
          <a href="#">立即购买</a>
        </div>
      </div>
      <!-- middle-two第二个模块 -->
      <div class="middle-two">
        <div class="middle-two-left">
          <p>温馨系列</p>
          <p>温馨之家系列家具</p>
        </div>
        <a href="#" class="middle-two-right">查看所有</a>
      </div>
      <!-- middle-three第三个模块 -->
      <div id="middle-three">
        <div class="middle-three">
          <div class="middle-three-threes">
            <img  class="middle-three-img" src="./img/baifour.png" alt="">
              <div class="middle-threes">
                <p>黑色复古真皮沙发</p>
                <div class="middle-three-twos">
                  <span>460￥</span>
                  <span>246￥</span>
                </div>
                <a href="#">立即购买</a>
              </div>
          </div>
          <div class="middle-three-threes">
            <img  class="middle-three-img" src="./img/baifour.png" alt="">
              <div class="middle-threes">
                <p>黑色复古真皮沙发</p>
                <div class="middle-three-twos">
                  <span>460￥</span>
                  <span>246￥</span>
                </div>
                <a href="#">立即购买</a>
              </div>
          </div>
          <div class="middle-three-threes">
            <img  class="middle-three-img" src="./img/baifour.png" alt="">
              <div class="middle-threes">
                <p>黑色复古真皮沙发</p>
                <div class="middle-three-twos">
                  <span>460￥</span>
                  <span>246￥</span>
                </div>
                <a href="#">立即购买</a>
              </div>
          </div>
          <div class="middle-three-threes">
            <img  class="middle-three-img" src="./img/baifour.png" alt="">
              <div class="middle-threes">
                <p>黑色复古真皮沙发</p>
                <div class="middle-three-twos">
                  <span>460￥</span>
                  <span>246￥</span>
                </div>
                <a href="#">立即购买</a>
              </div>
          </div>
        </div>
      </div>
      <!-- middle-three第三个模块(包含第四个) -->
      <div id="middle-three">
        <div class="middle-three">
          <div class="middle-three-threes">
            <img  class="middle-three-img" src="./img/baifourr.png" alt="">
              <div class="middle-threes">
                <p>黑色复古真皮沙发</p>
                <div class="middle-three-twos">
                  <span>460￥</span>
                  <span>246￥</span>
                </div>
                <a href="#">立即购买</a>
              </div>
          </div>
          <div class="middle-four">
            <img class="middle-four-img" src="./img/baifourrr.png" alt="">
            <div class="middle-fours">
              <p>黑色复古真皮沙发</p>
              <div class="middle-four-twos">
                <span>4600￥</span>
                <span>2046￥</span>
              </div>
              <a href="#">立即购买</a>
            </div>
            <p class="dazhe">劲爆五折</p>
          </div>
          <div class="middle-three-threes">
            <img  class="middle-three-img" src="./img/baifourr.png" alt="">
              <div class="middle-threes">
                <p>黑色复古真皮沙发</p>
                <div class="middle-three-twos">
                  <span>460￥</span>
                  <span>246￥</span>
                </div>
                <a href="#">立即购买</a>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 尾部 -->
  <div id="foot">
    <div class="foot">
      <ul class="footleft">
        <a href="#">关于我们</a>
        <a href="#">企业介绍</a>
        <a href="#">联系我们</a>
        <a href="#">企业招聘</a>
      </ul>
      <ul class="footleft">
        <a href="#">案例展示</a>
        <a href="#">工地鉴赏</a>
        <a href="#">装修实景</a>
        <a href="#">精品案例</a>
      </ul>
      <ul class="footleft">
        <a href="#">装修服务</a>
        <a href="#">新房装修</a>
        <a href="#">老房改造</a>
        <a href="#">别墅大宅</a>
                <a href="#">皇冠工程</a>
              </ul>
              <div class="footleft">
                <img src="./img/erweima.png" alt="">
                <p>免费领取户型规划</p>
              </div>
              <div class="footright">
                <p>全国服务热线:</p>
                <p>400- 888-8888</p>
                <p>地址:中国(. 上海)自由贸易试验区碧波路690号1幢402- 1室</p> 
              </div>
            </div>
          </div>
          <div id="footer">
            <div class="footer">绿色小屋装饰有限公司版权所有C2021 (沪)xxx证xXXxx号 使用前必读</div>
          </div>

</body>
</html>